<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>调度看板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="icon" th:href="@{/static/console/common/images/favicon.ico}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/element/index.css}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/static/console/css/production/dispatch.css?version=202503181751}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/static/console/css/production/component/indent-select.css?version=202501071001}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/static/console/css/production/component/whole-tran.css?version=202501071001}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/static/console/css/production/component/invoice-handle.css?version=202501071001}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/static/console/css/production/component/invoice-part-item-rows.css?version=202501071001}"/>
    <link rel="stylesheet" type="text/css"
          th:href="@{/static/console/css/production/component/invoice-detail.css?version=202501071001}"/>
</head>

<body>
<div id="container">
    <div class="tab-operate-box">
        <label>计划:</label><span class="tab-stere plan-stere">*****</span><label>方;</label>
        <label>生产:</label><span class="tab-stere pro-stere">*****</span><label>方;</label>
        <label>车辆:</label><span class="tab-stere pro-car">*****</span><label>车</label>
        <!--<el-input size="small"></el-input>-->
        <el-button type="success" icon="el-icon-refresh" @click="loadWorkIndents" size="small">刷新</el-button>
        <el-radio-group v-model="tabIndentPro" @input="intsTypeChange" size="small">
            <el-radio-button label="0">所有</el-radio-button>
            <el-radio-button label="1">生产中</el-radio-button>
            <el-radio-button label="3">暂停中</el-radio-button>
        </el-radio-group>
        <!-- 分页数据 -->
        <el-radio-group v-model="tabIndentCast" @input="castModelChange" size="small" fill="#FF8800">
            <el-radio-button label="-1">全部</el-radio-button>
            <template v-for="castMd in castModels">
                <el-radio-button :label="castMd">{{castMd}}</el-radio-button>
            </template>
        </el-radio-group>
    </div>
    <el-container class="pro-dispatch-container">
        <el-container>
            <el-main class="pro-indent-box" v-loading="workIndentLoading">
                <!--任务单页面-->
                <template v-for="(indent,index) in workIndents">
                    <el-descriptions :column="6"
                                     :class="activeIndentCard == index ? 'indent-card active-indent-title' : 'indent-card wait-indent-title'"
                                     label-class-name="indent-card-label" content-class-name="indent-card-content"
                                     border @click.native="changeActiveIndent(index,indent)">
                        <template slot="title">
                            {{indent.code}}
                        </template>
                        <el-descriptions-item label="项目名称" :span="6">{{indent.conName}}</el-descriptions-item>
                        <el-descriptions-item label="客户名称" :span="6">{{indent.clientName}}</el-descriptions-item>
                        <el-descriptions-item label="调度开盘时间" :span="6" label-class-name="indent-time"
                                              content-class-name="indent-time">{{indent.dispatchStartTime}}
                        </el-descriptions-item>
                        <el-descriptions-item label="施工部位" :span="6" label-class-name="dispatch-indent-site"
                                              content-class-name="dispatch-indent-site">{{indent.site}}
                        </el-descriptions-item>
                        <el-descriptions-item label="施工标号" :span="5" label-class-name="indent-strength"
                                              content-class-name="indent-strength">{{indent.strengthName}}
                        </el-descriptions-item>
                        <el-descriptions-item label="塌落度" :span="1" label-class-name="indent-three-label">
                            {{indent.slumps}}
                        </el-descriptions-item>
                        <el-descriptions-item label="特性要求" :span="6">{{indent.tech}}</el-descriptions-item>
                        <el-descriptions-item label="车次" :span="5">{{indent.totalCar}}</el-descriptions-item>
                        <el-descriptions-item label="完成量" :span="1" label-class-name="indent-three-label">
                            {{indent.sendStere}}/{{indent.planStere}}
                        </el-descriptions-item>
                        <el-descriptions-item label="浇筑方式" :span="6">{{indent.castModelName}}</el-descriptions-item>
                        <el-descriptions-item label="生产线" :span="6">
                            <template v-for="lineName in indent.lineNameList">
                                <el-tag type="danger" size="mini">{{lineName}}</el-tag>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="泵送设备" :span="6">{{indent.pumpDeviceName}}</el-descriptions-item>
                        <el-descriptions-item label="工地地址" :span="6" label-class-name="indent-address"
                                              content-class-name="indent-address">{{indent.address}}
                        </el-descriptions-item>
                        <el-descriptions-item label="运输车辆" :span="4" content-class-name="dispatch-caring">
                            <template v-for="caring in indent.carCodeList">
                                <el-tag size="mini" type="success">
                                    <i class="el-icon-truck"></i>{{caring}}
                                </el-tag>
                            </template>
                        </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-main>
            <el-footer class="pro-invoice-box">
                <el-table :data="invoiceDatas" border height="180" max-height="180">
                    <el-table-column label="序号"
                                     show-overflow-tooltip
                                     type="index"
                                     width="50"></el-table-column>
                    <el-table-column prop="code" show-overflow-tooltip
                                     label="发货单编号"
                                     width="160"></el-table-column>
                    <el-table-column label="生产线"
                                     prop="mixName"
                                     width="80"></el-table-column>
                    <el-table-column show-overflow-tooltip
                                     prop="conName"
                                     label="工程名称"
                                     width="240"></el-table-column>
                    <el-table-column show-overflow-tooltip
                                     prop="site"
                                     label="施工部位"
                                     width="150"></el-table-column>
                    <el-table-column show-overflow-tooltip
                                     prop="strengthName"
                                     label="砼强度"
                                     width="120">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip
                                     prop="carCode"
                                     label="搅拌车"
                                     width="120">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip
                                     prop="sendStere"
                                     label="发货方量(方)"
                                     width="120">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip
                                     prop="createTime"
                                     label="派单时间"
                                     width="180">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip
                                     prop="proTime"
                                     label="生产时间"
                                     width="180">
                    </el-table-column>
                    <el-table-column fixed="right" label="状态" width="80">
                        <template slot-scope="scope">
                            <template v-if="scope.row.process == 6">
                                <el-tag type="danger">{{scope.row.processTxt}}</el-tag>
                            </template>
                            <template v-else>
                                {{scope.row.processTxt}}
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-footer>
        </el-container>
        <!--右侧信息栏-->
        <el-aside width="420px" class="pro-info-box">
            <el-container>
                <el-header class="lines-box">
                    <span class="lines-box-title">生产线派单信息</span>
                    <template v-for="line in proLines">
                        <el-row>
                            <el-col :span="5">
                                <el-tag>
                                    <i class="el-icon-turn-off"></i>{{line.lineName}}
                                </el-tag>
                            </el-col>
                            <el-col :span="19">
                                <template v-for="(dis,ci) in line.disList">
                                    <el-popover placement="left" width="400" trigger="click"
                                                @show="loadInvMiniDetail(dis.invoiceId)" :value="disPopover">
                                        <el-row class="invoice-item-row">
                                            <el-col :span="6" class="invoice-item-label">
                                                <i class="el-icon-user"></i>
                                                派单号
                                            </el-col>
                                            <el-col :span="18" class="invoice-item-desc">
                                                {{dis.code}}
                                            </el-col>
                                        </el-row>
                                        <invoice-part-item-rows
                                                :invoice-detail="invoiceDetail"></invoice-part-item-rows>
                                        <el-row class="invoice-item-row">
                                            <el-col :span="6" class="invoice-item-label">
                                                <i class="el-icon-user"></i>
                                                上传方量
                                            </el-col>
                                            <el-col :span="18" class="invoice-item-desc">
                                                {{dis.uploadStere}}
                                            </el-col>
                                        </el-row>
                                        <!--  正在生产中对应枚举:InvoiceProcessEnum显示绿色  -->
                                        <el-button slot="reference" :type="dis.proStatus == 2 ? 'success' : ''"
                                                   class="line-car" icon="el-icon-truck" size="mini">{{dis.carCode}}
                                        </el-button>
                                    </el-popover>
                                </template>
                            </el-col>
                        </el-row>
                    </template>
                </el-header>
                <el-main class="cars-box">
                    <el-tabs type="card">
                        <el-tab-pane label="排队中">
                            <el-input v-model="carSearch.queue" placeholder="请输入内容" size="mini" clearable>
                                <el-button slot="append" icon="el-icon-search" @click="loadCarList"
                                           size="mini"></el-button>
                            </el-input>
                            <el-table :data="queueCars" size="mini" class="queue-car" height="22vh" border>
                                <el-table-column label="序号" type="index" width="50"></el-table-column>
                                <el-table-column prop="code" label="自编号" width="80"></el-table-column>
                                <el-table-column prop="carNo" label="车牌号" width="80"></el-table-column>
                                <el-table-column prop="maxStere" label="方量" width="50"></el-table-column>
                                <el-table-column prop="signTime" label="打卡时间" width="180"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="已生产">
                            <el-table :data="completedInvs" size="mini" class="tran-car" height="25vh" border
                                      @row-dblclick="loadInvDetail">
                                <el-table-column label="序号" type="index" width="50"></el-table-column>
                                <el-table-column prop="code" label="自编号" width="80"></el-table-column>
                                <el-table-column prop="carNo" label="车牌号" width="100"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="运输中">
                            <el-table :data="tranInvs" size="mini" class="tran-car" height="25vh" border
                                      @row-dblclick="loadInvDetail">
                                <el-table-column label="序号" type="index" width="50"></el-table-column>
                                <el-table-column prop="code" label="自编号" width="80"></el-table-column>
                                <el-table-column prop="carNo" label="车牌号" width="100"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="休息">
                            <el-input v-model="carSearch.other" placeholder="请输入内容" size="mini" clearable>
                                <el-button slot="append" icon="el-icon-search" @click="loadCarList"
                                           size="mini"></el-button>
                            </el-input>
                            <el-table :data="otherCars" size="mini" class="other-car" height="22vh" border>
                                <el-table-column label="序号" type="index" width="50"></el-table-column>
                                <el-table-column prop="code" label="自编号" width="80"></el-table-column>
                                <el-table-column prop="carNo" label="车牌号" width="80"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <el-footer class="inv-back-box">
                    <el-tabs type="card">
                        <el-tab-pane label="近10车">
                            <el-table :data="nearlyInvList" border height="200" max-height="200">
                                <el-table-column prop="code" show-overflow-tooltip
                                                 label="发货单编号"
                                                 width="160"></el-table-column>
                                <el-table-column label="生产线"
                                                 prop="mixName"
                                                 width="80"></el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 prop="conName"
                                                 label="工程名称"
                                                 width="240"></el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 prop="site"
                                                 label="施工部位"
                                                 width="150"></el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 prop="strengthName"
                                                 label="砼强度"
                                                 width="80">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 prop="carCode"
                                                 label="搅拌车"
                                                 width="70">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 prop="sendStere"
                                                 label="发货"
                                                 width="60">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 label="车次"
                                                 width="60">
                                    <template slot-scope="scope">
                                        {{scope.row.totalCar}}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 label="方量"
                                                 width="60">
                                    <template slot-scope="scope">
                                        {{scope.row.totalStere}}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip
                                                 prop="proTime"
                                                 label="生产时间"
                                                 width="180">
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="退砼列表">
                            <template v-for="invBack in invBackList">
                                <el-popover placement="left" width="400" trigger="click" :value="invBakPopover">
                                    <el-descriptions class="inv-bak-desc-box" title="退砼单详情" :column="1" size="mini"
                                                     border>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-coin"></i>
                                                砼标号
                                            </template>
                                            {{invBack.strengthName}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-time"></i>
                                                生产时间
                                            </template>
                                            {{invBack.invoiceProTime}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-time"></i>
                                                退料时间
                                            </template>
                                            {{invBack.weightTime}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-thumb"></i>
                                                退料方量
                                            </template>
                                            {{invBack.operateStere}}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                    <div class="handle-order-item" slot="reference">
                                        发货单
                                        <el-link target="_blank" type="primary">
                                            {{invBack.invoiceCode}}
                                        </el-link>
                                        有
                                        <el-link :underline="false" type="success">
                                            {{invBack.operateStere}}方
                                        </el-link>
                                        退砼需要处理
                                    </div>
                                </el-popover>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </el-footer>
            </el-container>
        </el-aside>
    </el-container>
    <!--  发货单详情  -->
    <invoice-detail-dialog v-if="detailDialog.show" :invoice-id="detailDialog.invoiceId"
                           @closed="detailDialog.show = false"></invoice-detail-dialog>
</div>
</body>
<script type="text/javascript" th:src="@{/static/console/assets/js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/static/console/js/pages/base.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/vue.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/element/index.js}"></script>
<script type="text/javascript" th:src="@{/static/console/datepicker/jquery-datePicker.js}" charset="utf-8"></script>
<script th:src="@{/static/console/js/pages/production/component/indent-select.js?version=202504031025}"></script>
<script th:src="@{/static/console/js/pages/production/component/whole-tran.js?version=202505161106}"></script>
<script th:src="@{/static/console/js/pages/production/component/invoice-detail.js?version=202501071001}"></script>
<script th:src="@{/static/console/js/pages/production/component/invoice-handle.js?version=202501071001}"></script>
<script th:src="@{/static/console/js/pages/production/component/invoice-part-item-rows.js?version=202501071001}"></script>
<script type="text/javascript" th:src="@{/static/console/js/pages/board/dispatch.js?version=202504021646}"
        charset="utf-8"></script>

</html>